import { Card, Skeleton } from 'antd';
import React, { useState, useEffect } from 'react';
import { axiosAjax } from '../../services/analysisAxios';

export default function ListSort() {
    // 存储热销商品
    const [dataHot, setDatadataHot] = useState([]);
    const [loaded, setLoaded] = useState(false);
    const allCommityTotal = async () => {
        // 获取所有下单商品的信息
        let { data } = await axiosAjax('get', '/analysis/allcommiditywithtime');
        let arr = data.map(item => {
            if (item.commodity.sale && item.commodity.price) {
                return {
                    commodity: item.commodity,
                    sales: parseInt(item.commodity.sale) * parseInt(item.commodity.price)
                }
            }
        });
        // 按照销量从高到低进行排序
        let hotArr = arr.sort((a, b) => b.sales - a.sales).length >= 8 ? arr.sort((a, b) => b.sales - a.sales).slice(1, 9) : (arr.sort((a, b) => b.sales - a.sales).slice(1,));
        setDatadataHot(hotArr);
        setLoaded(true);
    }

    useEffect(() => {
        allCommityTotal();
    }, []);

    if (!loaded) {
        return <div className="site-card-border-less-wrapper">
            <Skeleton
                active
                title={{ width: 0 }}
                paragraph={{
                    rows: 13,
                    width: [300, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 240]
                }} />
        </div>
    }
    return (
        <div className="site-card-border-less-wrapper">
            <Card
                title="热销商品"
                headStyle={{ fontSize: '20px' }}
                bordered={false}
                style={{
                    width: "610px",
                    height: '500px',

                }}>
                {dataHot.map((item, i) =>
                    <p key={item.commodity._id} >
                        <span
                            style={{
                                fontSize: "24px",
                                fontStyle: 'italic',
                                display: 'inline-block',
                                width: '30px',
                                height: '30px',
                                backgroundColor: "#f56a00",
                                lineHeight: '30px',
                                textAlign: 'center',
                                color: "white",
                                borderRadius: "50%",
                                marginRight: '20px',
                                marginLeft: "20px"
                            }}>{i + 1}</span>
                        <span style={{ fontSize: "20px", width: "170px", display: "inline-block", marginRight: '280px', boxSizing: 'border-box' }}>{item.commodity.name}</span>
                        <span>{item.sales}</span>
                    </p>)}
            </Card>
        </div>
    )
}